@background-color: rgba(0, 0, 0, 0.45);
@utils-background-color: rgba(0, 0, 0, 0.65);
@utils-hover-color: rgba(255, 255, 255, 0.85);
@utils-color: rgba(255, 255, 255, 0.65);
@utils-padding: 10px;
@utils-font-size: 18px;
@utils-border-radius: 20px;
@closed-background-color: rgba(0, 0, 0, 0.65);
@closed-hover-background-color: rgba(0, 0, 0, 0.85);
@closed-color: rgba(255, 255, 255, 0.65);
@closed-hover-color: rgba(255, 255, 255, 0.85);
@closed-padding: 10px 14px;
@closed-font-size: 18px;
@closed-border-radius: 50%;
@closed-z-index: 10000;
@utils-z-index: 10000;
@transition-duration: 0.3s;
@transition-timing-function: ease-in-out;

.ImagePreviewMasked-show, .ImagePreviewMasked-none {
    user-select: none; /* 标准语法 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
}

.ImagePreviewMasked-none {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: @background-color;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    opacity: 0;
    transition: opacity @transition-duration @transition-timing-function;
    /* 动画效果 */
    pointer-events: none;
    /* 防止在预览页面加载时阻挡下方元素的交互 */
}

.ImagePreviewMasked-show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: @background-color;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity @transition-duration @transition-timing-function;
}

.ImagePreviewMasked-none img {
    position: absolute;
    max-width: 0;
    max-height: 0;
    transition: max-height @transition-duration @transition-timing-function, max-width @transition-duration @transition-timing-function;
}

.ImagePreviewMasked-show img {
    cursor: grab;
    position: absolute;
    max-width: 100%;
    max-height: 90vh;
    transition: max-height @transition-duration @transition-timing-function, max-width @transition-duration @transition-timing-function;
}

.ImagePreviewMasked-closed, .ImagePreviewMasked-left, .ImagePreviewMasked-right {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: @closed-background-color;
    padding: @closed-padding;
    border-radius: @closed-border-radius;
    color: @closed-color;
    font-size: @closed-font-size;
    cursor: pointer;
    z-index: @closed-z-index;

    &:hover {
        background-color: @closed-hover-background-color;
        color: @closed-hover-color;
    }
}

.ImagePreviewMasked-left {
    left: 10px;
    right: auto;
    top: calc(50% - 9px);
}

.ImagePreviewMasked-right {
    right: 10px;
    left: auto;
    top: calc(50% - 9px);
}

.ImagePreviewMasked-utils {
    position: absolute;
    display: flex;
    bottom: 20px;
    padding: @utils-padding;
    background-color: @utils-background-color;
    font-size: @utils-font-size;
    color: @utils-color;
    border-radius: @utils-border-radius;
    z-index: @utils-z-index;

    .ImagePreviewMasked-utils-item {
        padding: 0 10px;
        cursor: pointer;

        &:hover {
            color: @utils-hover-color;
        }
    }
}